<template>

  <div class="second_block" v-if="visible">


    <!--      <div style="text-align: center;">-->
    <!--        <img src="/static/logo.png" style="width: 80px;height: 75px">-->
    <!--      </div>-->
    <!--    <el-divider></el-divider>-->
    <div style="margin-top: -10px">
      <!--      <div style="height: 40px;border: 1px solid rgb(254, 137, 4)">-->
      <div style="font-size: 17px;text-align: center;font-weight: bold;color: #000000;line-height: 30px;width: 300px;margin: auto">
        {{ script_1 }}
      </div>
      <!--      </div>-->

      <div style="width: 300px;border: 1px solid #DCDFE6;margin: auto">
        <span style="margin-left: 10%">Order Information</span>
        <br/>
        <span>Order ID: {{ form.order_id }}</span>
        <br/>
        <span>Product Asin: {{ form.asin }}</span>
        <br/>
        <span style="width: 30%">
          <el-tooltip style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis" class="item" effect="dark"
                      :content="form.product_title" placement="top">
              <div class="info-title">Product Name: {{ form.product_title }}</div>
            </el-tooltip>
          </span>
      </div>
    </div>


    <br>

    <div style="font-size: 17px;text-align: center;font-weight: bold;color: #000000;line-height: 30px;">Choose the one
      you want
    </div>

    <div :style="progressGiftDiv">
      <img :src="progressGiftSrc" :style="progressGiftSize">
    </div>

    <div style="display:flex;">
      <div class="tagBox">
        <div v-for="(item,index) in form.gift_info" :key="index" class="tag" :ref="'tag'+index">
          <el-button size="mini" class="buttonColor" plain style="height: 110px;width: 105px;"
                     @click="giftType(item,$event)">
            <img :src="item.image" alt="" width="100%" height="75px">
          </el-button>
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
    <br>
    <br>
    <div style="text-align: center">
      <!--        <el-button type="info" plain style="width: 90px" @click="doBack" round>Preview</el-button>-->
      &nbsp;&nbsp;
      <el-button style="width: 90px;background: #44546a" @click="doCommentOn"><span style="color: orange">Next</span></el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "gift-selection",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    data: Object,
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      progressGiftDiv: '',
      progressGiftSize: '',
      progressGiftSrc: '',
      giftImageSize:'',
      // 表单验证规则
      rules: {},
      // 提交状态
      loading: false,

      // 是否是修改
      isUpdate: false,
      script_1: '',
    };
  },
  mounted() {
    // 根据不同路由跳转不同页面
    if (this._isMobile()) {
      this.progressGiftSrc = '/static/gift_logo.png';
      this.progressGiftDiv = 'margin-left: 3%;';
      this.progressGiftSize = 'width: 90%;height: 60px;margin:auto';
      this.giftImageSize='width:90%';
    } else {
      this.progressGiftSrc = '/static/gift_logo.png';
      this.progressGiftDiv = 'margin-left: 20%;';
      this.progressGiftSize = 'width: 80%;height: 55px';
      this.giftImageSize='width:35%';
    }
  },
  methods: {
    // 判断是否是手机端，如果是，返回true
    _isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag
    },
    //关闭页面
    handleClose(done) {
      done();
      this.$emit('handleClose');
    },
    setForm(form) {
      this.form = form;
    },
    setBuyerConfig(data) {
      this.script_1 = data.gift_select_page_script.script_1;
    },
    //返回上一级
    doBack() {
      this.$emit('doBack', '');
    },
    //获取礼品类型
    giftType(gift, event) {
      for (let i = 0; i < document.getElementsByClassName('buttonColor').length; i++) {
        document.getElementsByClassName('buttonColor')[i].style.border = '1px solid #DCDFE6';
      }
      // document.getElementsByClassName('buttonColor').forEach((aa) => {
      //   aa.style.border = '1px solid #DCDFE6';
      // });


      let input = event.currentTarget
      input.style.border = "1px solid rgb(254, 137, 4)"

      this.form.gift_address_display = gift.address_display;
      this.form.gift_name = gift.name;
      this.form.gift_type_2 = gift.gift_type;
      this.form.gift_email = gift.email;
      this.form.gift_image = gift.image;
      if (gift.address_display === 1 && this.form.gift_type_2 === 2) {
        this.form.gift_type = 1; //显示地址产品信息
      } else {
        this.form.gift_type = 2;//不显示
      }
    },
    //判断评论页面
    doCommentOn() {
      //判断是否有选择礼品
      if (!this.form.gift_address_display) {
        this.$message({type: 'warning', message: 'Please select a gift type', offset: 160});
      } else {
        this.$emit('getGiftSelection', this.form);
      }

    }
  }
}
</script>

<style scoped>
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  background: #409EFF;
  border: 3px solid #328ce9;
  color: white;
  box-sizing: border-box;
}
.el-divider.el-divider--horizontal{
  margin-top: -1px;
}

.el-button--mini, .el-button--mini.is-round{
  padding: 1px 1px;
}

.tagBox {
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  /*white-space: nowrap;*/
  position: relative; /**需要设置在盒子设置相对定位，不然offsetLeft会基于整个页面body */
}

.tagBox::-webkit-scrollbar {
  display: none;
}

.tagBox::-webkit-scrollbar {
  width: 0;
  background: 0 0;
}

.tag {
  width: 25%;
  text-align: center;
  margin: 4px;
  padding: 5px 5px;
  /*background:white;*/
  flex-shrink: 0;
}

.tag.active {
  background: #67C23A;
  color: white;
}
</style>
